<template>
    <div class="home-container">
        <!-- 顶部区域（系统名称和用户信息） -->
        <div class="top-area">
            <div class="system-name">
                <img src="@/assets/traffic-light.png" alt="红绿灯" class="traffic-light-icon" />
                <span>人工智能交通违法抓拍人脸识别软件</span>
            </div>
            <div class="user-info">
                <span>欢迎, {{ username }}</span>
                <button @click="logout">退出</button>
            </div>
        </div>

        <!-- 横向导航栏 -->
        <div class="nav-bar">
            <div v-for="module in modules" :key="module.name" class="nav-item"
                :class="{ active: activeModule === module.name }" @click="switchModule(module)">
                <i :class="module.icon"></i>
                <span>{{ module.name }}</span>
            </div>
        </div>

        <!-- 页面主体部分 -->
        <div class="main-content">
            <component :is="activeComponent"></component>
        </div>
    </div>
</template>

<script setup>

import { ref, onMounted, shallowRef } from "vue";
import { useRouter } from "vue-router";
import FaceRecognition from "../components/FaceRecognition.vue";
import FaceCapture from "../components/FaceCapture.vue";
import TrafficViolation from "../components/TrafficViolation.vue";
import BasicInfo from "../components/BasicInfo.vue";
import Announcement from "../components/Announcement.vue";
import SystemManagement from "../components/SystemManagement.vue";

const router = useRouter();
const username = ref("");
const activeModule = ref("人脸识别");
const activeComponent = shallowRef(FaceRecognition);

// 模块数据
const modules = ref([
    { name: "人脸识别", icon: "fas fa-user", component: FaceRecognition },
    { name: "人脸抓拍", icon: "fas fa-camera", component: FaceCapture },
    { name: "交通违规", icon: "fas fa-car", component: TrafficViolation },
    { name: "基础信息", icon: "fas fa-info-circle", component: BasicInfo },
    { name: "通知公告", icon: "fas fa-bullhorn", component: Announcement },
    { name: "系统管理", icon: "fas fa-cog", component: SystemManagement },
]);

// 获取登录用户信息
onMounted(() => {
    const user = localStorage.getItem("username");
    if (user) {
        username.value = user;
    } else {
        router.push("/login");
    }
});

// 切换模块
const switchModule = (module) => {
    activeModule.value = module.name;
    activeComponent.value = module.component;
};

// 退出登录
const logout = () => {
    localStorage.removeItem("username");
    localStorage.removeItem("authToken");
    router.push("/login");
};
</script>

<style scoped>
.home-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #f5f7fa;
}

/* 顶部区域 */
.top-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #1c5980;
    /* 深蓝色背景 */
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.system-name {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: bold;
}

.traffic-light-icon {
    width: 30px;
    /* 图片宽度 */
    height: 60px;
    /* 图片高度 */
}

.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-info button {
    padding: 5px 10px;
    background-color: #3498db;
    /* 蓝色按钮 */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.user-info button:hover {
    background-color: #2980b9;
    /* 按钮悬停效果 */
}

/* 横向导航栏 */
.nav-bar {
    display: flex;
    justify-content: space-around;
    background-color: #3498db;
    /* 天蓝色背景 */
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
    /* 白色文字 */
}

.nav-item:hover {
    background-color: #2980b9;
    /* 悬停背景色 */
    border-radius: 5px;
    transform: translateY(-2px);
}

.nav-item.active {
    background-color: #1c5980;
    /* 激活背景色 */
    border-radius: 5px;
}

.nav-item i {
    font-size: 24px;
    margin-bottom: 5px;
}

.nav-item span {
    font-size: 14px;
}

/* 页面主体部分 */
.main-content {
    flex-grow: 1;
    padding: 20px;
    background-color: #ffffff;
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>